<template>
  <div class="center">
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled= "false"
      infinite-scroll-distance="10">
      <li v-for="(item, index ) in articles" :key="index">
        <mt-cell :title="item.author">
         <a href="javascript:;" @click="jump(item.contentLink)">
           <span class="shop_title ellipsis" >{{item.content}}</span>
         </a>
        </mt-cell>
      </li>
    </ul>
  </div>
</template>

<script>
import 'mint-ui/lib/style.css'
import {reqArticlePage} from '../../api'
import { mapState } from 'vuex'
export default {
  name: 'AllScroll',
  mounted () {
    // this.$store.dispatch('getArticlePage', {})
    this.$nextTick(() => {
      // console.log(this.articlesList)
      // this.$store.dispatch('getArticlePage', {})
      // this.reqArticlePage()
      // this.articlesList = this.tempList
      // this.tempList = []
    })
  },
  computed: {
    ...mapState(['articles']),
    scrollList () {
      return this.articlesList
    }
  },
  data () {
    return {
      articlesList: [],
      tempList: []
    }
  },
  methods: {
    jump (url) {
      window.open(url, '_blank')
    },
    loadMore () {
      this.loading = true
      setTimeout(() => {
        this.$store.dispatch('getArticlePage', {})
        this.reqArticlePage()
        // for (let i = 0; i < this.tempList.length; i++) {
        //   this.articlesList.push(this.tempList[i])
        // }
        // console.log(this.articlesList)
        this.loading = false
      }, 2500)
    },
    async reqArticlePage () {
      const result = await reqArticlePage({'page': 1, 'size': 10})
      // console.log('reqArticlePage =============> ', result)
      if (result.code === 0) {
        this.tempList = result.data.page.list
      }
    }
  }
}
</script>

<style scoped>
  .center {
    display: block;
    text-align: -webkit-center;
  }
  .shop_title{
    float: left;
    width: 300px;
    color: #333;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
  }
  .ellipsis {
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
